<template>
  <ul :class="{[classPrefix+'-tab']:classPrefix}" class="tabs">
    <li v-for="item in dataSource" :key="item.value"
        class="tabs-item"
        :style="{height:height}"
        :class="liClass(item)" @click="select(item)">{{ item.text }}
    </li>
  </ul>
</template>

<script lang="ts">
import Vue from 'vue'
import {Component, Prop} from "vue-property-decorator";
import FormItem from "@/components/Money/FormItem.vue";
// Component 可以将下列代码转化为vue组件,目前vue-property-decorator好用
type DataSourceItem = { text: string, value: string }
@Component({
  components: {FormItem}
})
export default class Tabs extends Vue {
  @Prop({required: true}) dataSource!: DataSourceItem[]
  @Prop(String) readonly value!: string;
  @Prop(String) classPrefix?: string;
  @Prop({type:String,default:'64px'}) height!:string
  select(item: DataSourceItem) {
    this.$emit('update:value', item.value)
  }

  liClass(item: DataSourceItem){
    return {
      selected: item.value === this.value,
      [this.classPrefix + '-tabs-item']: this.classPrefix
    }
  }
}
</script>

<style lang="scss" scoped>
.tabs {
  background: #C4C4C4;
  display: flex;
  text-align: center;
  font-size: 24px;
  &-item {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    &.selected::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: #333;
    }
  }
}
</style>